<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
</head>

<body>
    <!-- 异步ajax -->
    <p>异步请求获取数据：</p>
    <p class="demo"></p>
    <script>
        // XMLHttpRequest异步的与服务器交换数据（ie5，6使用ActiveXObject）
        // XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
        let xhr = new XMLHttpRequest(); //实例化对象
        // XMLHttpRequest的onload属性，请求成功时调用
        xhr.onload = function() {
            // 输出接收到的文字数据
            // 获取来自服务器的响应
            //使用XMLHttpRequest对象的responseText属性（字符串形式的响应数据）---服务器响应非XML
            //使用XMLHttpRequest对象的responseXML属性（XML形式的响应数据）
            document.getElementById("demo").innerHTML = xhr.responseText;
        }

        //XMLHttpRequest的onerror属性，请求失败时被调用
        xhr.onerror = function() {
            document.getElementById("demo").innerHTML = "请求错误";
        }

        //向服务器发送异步GET请求
        // open(请求方式（GET/POST）,请求url（文件在服务器上的位置），true(异步)/false(同步))
        xhr.open("GET", "", true);
        // send(string)  string仅用于POST请求
        xhr.send();
    </script>
</body>

</html>